<!-- 首页 -->
<template>
  <div class="myadminbox">
    <div class="myadmin_left">
      <ul class="menu_list">
        <el-menu     class="el-menu-vertical-demo"  @open="handleOpen"   @close="handleClose"   background-color="rgb(50, 64, 87)"         text-color="#fff"         >
      
           <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <!-- HR模块 -->
              <span
                @click="
                  () => {
                    this.$router.push('./dashboard');
                    this.text1 = 'HR模块';
                    this.text2 = '人员资料管理';
                  }
                "
                >HR模块</span
              >
            </template>
              <el-menu-item index='/hr-personnel'  @click="()=>{this.$router.push('./hr-personnel'); this.text1='HR模块';this.text2='人员资料管理';this.text3='./hrlist'}">人员资料管理</el-menu-item>
              <el-menu-item index='/hr-salary'  @click="()=>{this.$router.push('./hr-salary'); this.text1='HR模块';this.text2='工资管理';this.text3='./hrlist'}">工资管理</el-menu-item>
              <el-menu-item index='/hr-rest'  @click="()=>{this.$router.push('./hr-rest'); this.text1='HR模块';this.text2='调休管理';this.text3='./hrlist'}">调休管理</el-menu-item>
              <el-menu-item index='/hr-personal'  @click="()=>{this.$router.push('./hr-personal'); this.text1='HR模块';this.text2='人员分析';this.text3='./hrlist'}">人员分析</el-menu-item>
          </el-submenu>
          <el-submenu index="3" router>
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>OA模块</span>
            </template>
              <el-menu-item index="/subsidy" @click="()=>{this.$router.push('/subsidy');this.text1='OA模块';this.text2='补贴申请';this.text3='./oalist'}" >补贴申请</el-menu-item>
              <el-menu-item index="/resign" @click="()=>{this.$router.push('./resign');this.text1='OA模块';this.text2='离职申请';this.text3='./oalist'}">离职申请</el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span>EAM模块</span>
            </template>
              <el-menu-item index="/eam-property" @click="()=>{this.$router.push('/eam-property');this.text1='EAM模块';this.text2='资产信息';this.text3='/EMA-property'}">资产信息</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span>SRM模块</span>
            </template>   
             <el-menu-item index="/srmSupplierlist" @click="()=>{this.$router.push('./srmSupplierlist');this.text1='SRM模块';this.text2='供应商信息';this.text3='./srmlist'}">供应商信息</el-menu-item>    
              <el-menu-item index="/srmlist" @click="()=>{this.$router.push('./srmlist');this.text1='SRM模块';this.text2='客户信息';this.text3='./srmlist'}" >客户信息</el-menu-item>
          </el-submenu>
        </el-menu>
      </ul>
    </div>
    <div class="myadmin_right"> 
       <div class="top">
        <div class="myadmin_right_navtitle">
                <!--面包屑导航-->
              
<el-breadcrumb separator="/" >
  <el-breadcrumb-item :to="{ path:'/dashboard' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item   v-if="text1!==''" ><a href="#"   @click="()=>{this.$router.push(text3)}">{{text1}}</a></el-breadcrumb-item>
 <el-breadcrumb-item v-if="text2!==''"><a href="">{{text2}}</a></el-breadcrumb-item>

</el-breadcrumb>
 
<el-dropdown @command="handleCommand">
  <span class="top-name">Hello,{{name}}</span>
  <span class="el-dropdown-link">
    <img :src="imgsrc" alt="" class="img">
  </span>
 
  <el-dropdown-menu slot="dropdown" style="width:100px"  align="center" >
    <el-dropdown-item command="index">首页</el-dropdown-item>
    <el-dropdown-item command="logout">退出</el-dropdown-item>
   
  </el-dropdown-menu>
</el-dropdown>
</div>
        </div>
        <div class="myadmin_right_content">
           <router-view></router-view>
        </div>
    </div>
     </div> 

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import router from '../router/index.js'
import imgsrc from "../assets/static/img/pic.jpg";
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      imgsrc: imgsrc,
      text1: "",
      text2: "",
      //  position: "1",
      name: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCommand: async function (command) {
      if (command === "index") {
        this.$router.push("/dashboard");
      } else if (command === "logout") {
        await this.$http.get("http://linweiqin.cn:8001/v2/signout").then(() => {
          this.$router.push("/");
        });
      }
    },
    getname: function () {
      this.name = sessionStorage.getItem("name");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getname();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //    this.position = this.$route.path;
  },
  beforeCreate() {
    //   this.position = this.$route.path;
  }, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.myadminbox {
  height: 100vh;
  display: flex;
  .myadmin_left {
    width: 16.66667%;
    height: 100vh;
    background-color: rgb(50, 64, 87);
    box-sizing: border-box;
    overflow: hidden;
    .el-menu-item {
      padding-left: 10px;
    }
  }
  .myadmin_right {
    overflow: auto;
    width: 83.33333%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    position: relative;
    .top {
      width: 83.33333%;
      position: fixed;
      z-index: 99;
      box-sizing: border-box;
      overflow: hidden;
      .myadmin_right_navtitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 10px;
        width: 100%;
        font-size: 0;
        background-color: #eff2f7;
        .top-name {
          height: 60px;
          line-height: 60px;
        }
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          outline: none;
        }
      }
    }
  }
}
</style>